<template>
  <view class="w-picker" :class="{'show': showPicker}" @touchmove.stop.prevent>
    <view class="mask" @tap="maskClick" :class="{'show': showPicker}" @touchmove.stop.prevent></view>
    <view class="w-picker-cnt" :class="{'show': showPicker}">
      <view class="w-picker-header">
        <text class="cancel-btn" @tap="cancel">取消</text>
        <text class="title">选择城市</text>
        <text class="confirm-btn" @tap="confirm">确定</text>
      </view>
      
      <!-- 搜索框 -->
      <view class="search-box">
        <input 
          type="text" 
          v-model="searchKey" 
          placeholder="搜索城市" 
          class="search-input"
          @input="onSearch"
        />
      </view>
      
      <scroll-view scroll-y class="city-list" v-if="!searchKey">
        <!-- 热门城市 -->
        <view class="section">
          <view class="section-title">热门城市</view>
          <view class="hot-cities">
            <view 
              v-for="city in hotCities" 
              :key="city.value"
              class="hot-city-item"
              :class="{'active': selectedCity && selectedCity.value === city.value}"
              @tap="selectCity(city)"
            >
              {{ city.label }}
            </view>
          </view>
        </view>
        
        <!-- 所有城市 -->
        <view class="section">
          <view class="section-title">所有城市</view>
          <view class="city-grid">
            <view 
              v-for="city in cities" 
              :key="city.value"
              class="city-item"
              :class="{'active': selectedCity && selectedCity.value === city.value}"
              @tap="selectCity(city)"
            >
              {{ city.label }}
            </view>
          </view>
        </view>
      </scroll-view>
      
      <!-- 搜索结果 -->
      <scroll-view scroll-y class="city-list" v-else>
        <view 
          v-for="city in searchResults" 
          :key="city.value"
          class="search-item"
          @tap="selectCity(city)"
        >
          {{ city.label }}
        </view>
        <view v-if="searchResults.length === 0" class="no-result">
          未找到相关城市
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import cityData from './city-data/city.js'

export default {
  name: 'w-picker',
  
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  
  data() {
    return {
      showPicker: false,
      searchKey: '',
      selectedCity: null,
      cities: cityData,
      hotCities: cityData.slice(0, 8), // 前8个城市作为热门城市
      searchResults: []
    }
  },
  
  watch: {
    value(val) {
      this.showPicker = val;
    }
  },
  
  methods: {
    onSearch(e) {
      const key = this.searchKey.toLowerCase();
      if (!key) {
        this.searchResults = [];
        return;
      }
      
      this.searchResults = this.cities.filter(city => 
        city.label.toLowerCase().includes(key)
      );
    },
    
    selectCity(city) {
      this.selectedCity = city;
    },
    
    confirm() {
      if (!this.selectedCity) {
        uni.showToast({
          title: '请选择城市',
          icon: 'none'
        });
        return;
      }
      
      this.$emit('confirm', this.selectedCity);
      this.close();
    },
    
    cancel() {
      this.close();
      this.$emit('cancel');
    },
    
    maskClick() {
      this.close();
    },
    
    close() {
      this.showPicker = false;
      this.$emit('input', false);
      this.searchKey = '';
      this.searchResults = [];
    }
  }
}
</script>

<style lang="scss" scoped>
.w-picker {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 999;
  visibility: hidden;
  
  &.show {
    visibility: visible;
  }
}

.mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 0.3s ease;
  
  &.show {
    opacity: 1;
  }
}

.w-picker-cnt {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: #fff;
  transform: translateY(100%);
  transition: all 0.3s ease;
  max-height: 80vh;
  border-radius: 24rpx 24rpx 0 0;
  overflow: hidden;
  
  &.show {
    transform: translateY(0);
  }
}

.w-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 30rpx;
  background: #f8f8f8;
  border-bottom: 1rpx solid #eee;
}

.title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.cancel-btn, .confirm-btn {
  font-size: 32rpx;
  padding: 20rpx;
}

.cancel-btn {
  color: #666;
}

.confirm-btn {
  color: #007aff;
}

.search-box {
  padding: 20rpx 30rpx;
  background: #f8f8f8;
}

.search-input {
  background: #fff;
  height: 72rpx;
  border-radius: 36rpx;
  padding: 0 30rpx;
  font-size: 28rpx;
}

.city-list {
  height: calc(80vh - 280rpx);
}

.section {
  padding: 20rpx 30rpx;
}

.section-title {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 20rpx;
}

.hot-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.hot-city-item {
  padding: 16rpx 40rpx;
  background: #f5f5f5;
  border-radius: 32rpx;
  font-size: 28rpx;
  color: #333;
  
  &.active {
    background: #e1f0ff;
    color: #007aff;
  }
}

.city-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.city-item {
  text-align: center;
  padding: 20rpx;
  background: #f5f5f5;
  border-radius: 12rpx;
  font-size: 28rpx;
  color: #333;
  
  &.active {
    background: #e1f0ff;
    color: #007aff;
  }
}

.search-item {
  padding: 30rpx;
  font-size: 28rpx;
  color: #333;
  border-bottom: 1rpx solid #eee;
  
  &:active {
    background: #f5f5f5;
  }
}

.no-result {
  padding: 60rpx 0;
  text-align: center;
  color: #999;
  font-size: 28rpx;
}
</style> 